<template>
  <div class="width1200 margin-center mgt-20">
    <div class="breadcrumb flex-center">
      <p class="title">
        {{ isoff == 1 ? "培训" : "研修" }}服务/{{ type == 1 ? "我的" : "线下"
        }}{{ isoff == 1 ? "培训" : "研修" }}
      </p>
    </div>

    <div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="待开始" name="2"></el-tab-pane>
        <el-tab-pane label="进行中" name="1"></el-tab-pane>
        <el-tab-pane label="已结束" name="3"></el-tab-pane>
      </el-tabs>
      <div class="flex">
        <div class="learning-box mgb-40">
          <div v-if="tableData.length == 0" class="center mg-50 color-999">
            暂无数据
          </div>
          <div
            class="learn-child"
            v-for="item in tableData"
            :key="item.trainId"
            @click="
              {
                $router.push('/trainingDetail/' + isoff + '/' + item.trainId);
              }
            "
          >
            <el-image
              class="learning-Img mgb-10"
              :src="item.headImg"
              fit="cover"
            ></el-image>
            <p class="state" v-if="item.state == 1">
              <img class="icon" :src="inHand_icon" />进行中
            </p>
            <p class="state" v-if="item.state == 2">
              <img class="icon" :src="waiting_icon" />待开始
            </p>
            <p class="state" v-if="item.state == 3">
              <img class="icon" :src="over_icon" />已结束
            </p>
            <p class="mgl-20 title mgb-10 line1">{{ item.title }}</p>
            <div class="mgl-20 flex-between-center">
              <p class="tag">{{ item.school }}</p>
              <div
                v-if="item.isSign == 0"
                class="btn focus"
                @click.stop="joinServe(item)"
              >
                报名
              </div>
              <div v-if="item.isSign == 1" class="btn">已报名</div>
            </div>
            <p class="mgl-20 date-text mgb-17 f12">
              <span class="mgr-15 color-666">{{ item.signNum }}已报名</span>
              <span class="color-666"
                >{{ item.addtime.substring(0, item.addtime.length - 3) }}~{{
                  item.begintime.substring(0, item.begintime.length - 3)
                }}</span
              >
            </p>
          </div>
        </div>
      </div>
      <!-- 分页 -->
      <pager
        :currPage="curr"
        :size="currsize"
        :total="totalPage"
        @pageEvent="page"
      ></pager>
    </div>
  </div>
</template>
<script>
import pager from "../components/pager";
export default {
  name: "myTraining",
  components: {
    pager,
  },
  data() {
    return {
      activeName: "1",
      curr: 1,
      currsize: 10,
      totalPage: 0,
      isoff: "", //1培训，2研修
      type: "", //1我的，2下线
      waiting_icon: require("../assets/img/椭圆 3@2x.png"),
      inHand_icon: require("../assets/img/进行中@2x.png"),
      over_icon: require("../assets/img/index/椭圆 2 副本@2x.png"),
      tableData: [],
    };
  },
  created() {
    this.init();
  },
  watch: {
    // 监听路由变化，路由变化的时候请求页面数据
    $route: function (to, from) {
      this.init();
    },
  },
  methods: {
    init() {
      this.isoff = this.$route.params.id;
      this.type = this.$route.params.type;
      if (!this.isoff) {
        return this.$message.warning("参数不合法！");
      }
      this.getTrainMySignList();
    },
    page(curr) {
      this.curr = curr;
      this.getTrainMySignList();
    },
    handleClick(tab, event) {
      //console.log(tab.name, event);
      this.getTrainMySignList();
    },
    // 我的报名培训
    getTrainMySignList() {
      if (this.type == 1) {
        this.$api.train
          .getTrainMySignList({
            current: this.curr,
            size: this.currsize,
            state: this.activeName,
            type: this.isoff,
          })
          .then((d) => {
            if (d.code == 200) {
              this.tableData = d.data;
              this.totalPage = d.totalCount;
            } else {
              this.$message.error(d.msg);
            }
          })
          .catch((e) => {
            console.log(e);
          });
      } else {
        this.$api.train
          .getTrainAllList({
            current: this.curr,
            size: this.currsize,
            state: this.activeName,
            type: this.isoff,
          })
          .then((d) => {
            if (d.code == 200) {
              this.tableData = d.data;
              this.totalPage = d.totalCount;
            } else {
              this.$message.error(d.msg);
            }
          })
          .catch((e) => {
            console.log(e);
          });
      }
    },
    //报名
    getTrainToSign() {
      this.$api.train
        .getTrainToSign({
          trainId: this.id,
        })
        .then((d) => {
          if (d.code == 200) {
            this.showJoined();
            this.getTrainMySignList();
            this.getTrainAllList();
          } else {
            this.$message.error(d.msg);
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },

    joinServe(row) {
      this.id = row.trainId;
      this.getTrainToSign();
      // this.dialogVisibleScore = true;
    },
    showJoined() {
      this.dialogVisibleJoined = true;
    },
  },
};
</script>
<style lang="less" scoped>
@import "../assets/css/variable.less";
.btn {
  background-color: #cb3e3e;
  opacity: 0.5;
  border-radius: 4px;
  width: 220px;
  text-align: center;
  font-size: 12px;
  color: #fff;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  line-height: 34px;
  height: 34px;
  display: inline-block;
  &.focus {
    opacity: 1;
  }
}
.learning-Img {
  width: 100%;
  height: 213px;
}
.learning-box {
  width: 100%;
}
.learn-child {
  display: inline-block;
  width: 360px;
  margin-right: calc((100% - 1080px) / 2);
  box-shadow: 1px 2px 33px 5px rgba(204, 204, 204, 0.12);
  border-radius: 1px 1px 1px 1px;
  position: relative;
  cursor: pointer;
  &:nth-child(3n) {
    margin-right: 0;
  }
  .shade {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 213px;
    background: #000000b3;
    border-radius: 1px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    opacity: 0;
    transition: 1s;
  }
  &:hover {
    .shade {
      opacity: 1;
      transition: 1s;
    }
  }
}
.state {
  position: absolute;
  height: 20px;
  line-height: 20px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  background-color: #fff;
  color: #cb3e3e;
  top: 5%;
  left: 0;
  padding: 0 10px;
  font-size: 12px;
  display: flex;
  align-items: center;
}
.icon {
  width: 10px;
  height: 10px;
  display: inline-block;
  margin-right: 5px;
}
</style>